<template>
  <!-- <div>{{'/'+`/${router.currentRoute.value.path.split('/')[1]}`.split('/')[2]}}</div> -->
  <div class="footer-wrapper">
    <div class="footer-item-box">
      <router-link to="/home/recommend">
        <div class="footer-item-content">
          <div
            class="flex-center"
            :class="
              (`/${
                `/${router.currentRoute.value.path.split('/')[1]}`.split('/')[1]
              }` === '/' ||
                `/${
                  `/${router.currentRoute.value.path.split('/')[1]}`.split(
                    '/'
                  )[1]
                }` === '/home') &&
              'active'
            "
          >
            <svg
              focusable="false"
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              fill="currentColor"
              viewBox="0 0 1024 1024"
            >
              <path
                d="M531.626667 111.445333l3.285333 1.898667 352 224a42.666667 42.666667 0 0 1 19.605333 32.384l0.149334 3.626667v481.301333h-85.333334l-0.021333-457.92L512 199.893333 202.645333 396.8v413.866667L732.010667 810.666667v85.333333H160a42.666667 42.666667 0 0 1-42.56-39.466667L117.333333 853.333333V373.333333a42.666667 42.666667 0 0 1 16.789334-33.92l2.986666-2.069333 352-224a42.666667 42.666667 0 0 1 42.517334-1.92z m102.144 453.12v85.333334h-256v-85.333334h256z"
              ></path>
            </svg>

            <!-- <div class="bottom-menu-icon bottom-menu-icon-home"></div> -->
          </div>
          <span class="footer-item-name">首页</span>
        </div>
      </router-link>
    </div>
    <div class="footer-item-box">
      <router-link to="/carFriends">
        <div class="footer-item-content">
          <div
          class="flex-center"
            :class="
              `/${router.currentRoute.value.path.split('/')[1]}` ===
                '/carFriends' && 'active'
            "
            ><svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 1024 1024"><path d="M512 85.333333c191.04 0 352.768 125.568 407.146667 298.666667h-90.624C777.898667 258.944 655.253333 170.666667 512 170.666667 323.477333 170.666667 170.666667 323.477333 170.666667 512s152.810667 341.333333 341.333333 341.333333c143.253333 0 265.877333-88.234667 316.522667-213.333333h90.624C864.746667 813.12 703.04 938.666667 512 938.666667 276.352 938.666667 85.333333 747.648 85.333333 512S276.352 85.333333 512 85.333333z m0 256a170.666667 170.666667 0 1 1 0 341.333334 170.666667 170.666667 0 0 1 0-341.333334z m0 85.333334a85.333333 85.333333 0 1 0 0 170.666666 85.333333 85.333333 0 0 0 0-170.666666z m377.365333 36.672a50.666667 50.666667 0 1 1 0 101.333333 50.666667 50.666667 0 0 1 0-101.333333z"></path></svg></div
          >
          <span class="footer-item-name">车友圈</span>
        </div></router-link
      >
    </div>
    <div class="footer-item-box">
      <router-link to="/chooseCar"
        ><div class="footer-item-content">
          <div
            class="flex-center"
            :class="
              `/${router.currentRoute.value.path.split('/')[1]}` ===
                '/chooseCar' && 'active'
            "
          >
            <svg
              focusable="false"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              fill="currentColor"
              viewBox="0 0 1024 1024"
            >
              <path
                d="M149.333333 420.266667a42.666667 42.666667 0 0 1 13.994667 2.346666l3.328 1.322667 183.744 81.664h323.178667l183.765333-81.664a42.666667 42.666667 0 0 1 13.76-3.52L874.666667 420.266667h128v85.333333h-53.333334v21.333333l-0.128 3.370667-21.930666 277.333333a42.666667 42.666667 0 0 1-39.232 39.168l-3.306667 0.128H709.333333a42.666667 42.666667 0 0 1-31.488-13.866666l-2.304-2.752-52.992-68.714667H401.429333l-52.970666 68.714667a42.666667 42.666667 0 0 1-30.208 16.469333l-3.584 0.149333H139.264a42.666667 42.666667 0 0 1-42.154667-36.010666l-0.384-3.285334-21.930666-277.333333L74.666667 526.933333v-21.333333H21.333333v-85.333333h128z m714.005334 94.357333l-163.349334 72.64a42.666667 42.666667 0 0 1-13.76 3.52L682.666667 590.933333H341.333333a42.666667 42.666667 0 0 1-13.994666-2.346666l-3.328-1.322667-163.370667-72.64-0.64 1.258667v9.578666L178.666667 761.6h114.986666l52.992-68.714667a42.666667 42.666667 0 0 1 30.208-16.469333l3.584-0.149333h263.125334a42.666667 42.666667 0 0 1 31.466666 13.866666l2.325334 2.752 52.970666 68.714667h114.986667l18.688-236.501333v-9.173334l-0.661333-1.301333zM723.818667 164.266667a85.333333 85.333333 0 0 1 68.117333 33.92l2.901333 4.074666L878.506667 356.266667h-96.725334l-57.941333-106.666667H300.16l-57.962667 106.666667H145.493333l83.669334-154.005334a85.333333 85.333333 0 0 1 65.984-37.845333l5.013333-0.149333h423.68z"
              ></path>
            </svg>
          </div>
          <span class="footer-item-name">选车</span>
        </div></router-link
      >
    </div>
    <div class="footer-item-box">
      <router-link to="/usedCar"
        ><div class="footer-item-content">
          <div
            class="flex-center"
            :class="
              `/${router.currentRoute.value.path.split('/')[1]}` ===
                '/usedCar' && 'active'
            "
          >
            <svg
              focusable="false"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              fill="currentColor"
              viewBox="0 0 1024 1024"
            >
              <path
                d="M699.797333 170.666667a64 64 0 0 1 53.973334 29.653333l127.36 200.149333h-101.12L688.064 256H336.234667L170.730667 514.410667 170.666667 768h105.578666l40.554667-80.512a42.666667 42.666667 0 0 1 34.688-23.36l3.413333-0.128 128.512-0.021333v85.354666h-102.229333l-40.533333 80.512a42.666667 42.666667 0 0 1-34.666667 23.36l-3.434667 0.128H128a42.666667 42.666667 0 0 1-42.666667-42.666666l0.085334-308.757334a42.666667 42.666667 0 0 1 6.741333-22.997333l178.517333-278.762667A64 64 0 0 1 324.565333 170.666667z"
              ></path>
              <path
                d="M644.565333 378.965333l73.813334 42.794667-46.122667 79.552L938.666667 501.333333v85.333334H598.186667c-31.786667 0-52.053333-33.365333-38.378667-61.290667l1.493333-2.773333 83.264-143.637334zM848.426667 877.802667l-74.453334-41.706667 48.277334-86.186667H555.392v-85.333333h339.648c31.509333 0 51.776 32.768 38.698667 60.650667l-1.472 2.858666-83.84 149.717334z"
              ></path>
            </svg>
          </div>
          <span class="footer-item-name">二手车</span>
        </div></router-link
      >
    </div>
    <div class="footer-item-box">
      <router-link to="/service">
        <div class="footer-item-content">
          <div
            class="flex-center"
            :class="
              `/${router.currentRoute.value.path.split('/')[1]}` ===
                '/service' && 'active'
            "
          >
            <svg
              focusable="false"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              fill="currentColor"
              viewBox="0 0 1024 1024"
            >
              <path
                d="M704 618.666667c115.84 0 210.090667 92.309333 213.248 207.36L917.333333 832v64h-85.333333v-64a128 128 0 0 0-123.2-127.914667L704 704H320a128 128 0 0 0-127.914667 123.2L192 832v64H106.666667v-64c0-115.84 92.309333-210.090667 207.36-213.248L320 618.666667h384z m-42.666667 192v85.333333H362.666667v-85.333333h298.666666z m21.333334-682.666667a42.666667 42.666667 0 0 1 42.56 39.466667L725.333333 170.666667v170.666666c0 117.824-95.509333 213.333333-213.333333 213.333334s-213.333333-95.509333-213.333333-213.333334c0-115.84 92.309333-210.090667 207.36-213.248L512 128h170.666667z m-42.666667 85.333333h-128a128 128 0 1 0 127.914667 132.8L640 341.333333v-128z"
              ></path>
            </svg>
          </div>
          <span class="footer-item-name">服务</span>
        </div></router-link
      >
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUpdated, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
</script>

<style lang="scss">
.footer-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  .footer-item-box {
    flex: 1;

    > a {
      .footer-item-content {
        height: 48vw/375 * 100;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        & > div,
        i {
          width: 28vw * 100/375;
          height: 28vw * 100/375;
          font-size: 20vw * 100/375;
          border-radius: 50%;

          &.active {
            background-color: #ffcc32;
          }
        }
        .flex-center {
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
        }
        .footer-item-name {
          font-size: 20vw * 100/375;
          line-height: 20vw * 100/375;
          transform:scale(.5)
        }
      }
    }
  }
}
</style>